<!DOCTYPE html>
<html lang="zh-tw">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <title>【实例】歌词滚动-对象</title>
</head>

<body>
<audio src="src/xtw.m4a" id="music"></audio>
<div class="progress" id="progress"></div>
<div class="bg"></div>
<div class="geci">
    <div class="mark"></div>
    <ul id="list">
    </ul>
</div>

<script>
"use strict";function word(t,e){var i=this;this.time=t.time,this.text=t.text,this.xh=e,this.target=document.createElement("li"),this.target.innerHTML=this.text,ul.appendChild(this.target),document.addEventListener("click",function(){if(music.played.length<=0){music.play();var t=void 0,e=void 0,n=0;i.set=setInterval(function(){e=music.currentTime,t=music.duration,document.getElementById("progress").style.width=e/t*100+"%";var r=Number(i.time.substr(1,2)),s=Number(i.time.substring(4,i.time.length-1));e>=60*r+s&&(clearInterval(i.set),i.light(),i.xh>4&&(n-=46*(i.xh-3),ul.style.transform="translateY("+n+"px)"))},1)}})}var ul=document.getElementById("list"),music=document.getElementById("music");word.prototype.light=function(){Array.from(this.target.parentNode.children).forEach(function(t){t.classList.remove("cur")}),this.target.classList.add("cur")},fetch("src/xtw.txt").then(function(t){return t.text()}).then(function(t){var e=[],i={};t.split("\n").forEach(function(t){var i=t.split("]");void 0==i[1]&&(i[1]=""),e.push({time:i[0]+"]",text:i[1]})}),setInterval(function(){ul.children.length>=e.length||e.forEach(function(t,e){i=new word(t,e)})},1)});
</script>
<style>
    * {
        margin: 0px;
        padding: 0px;
        list-style: none;
        box-sizing: border-box;
    }
    .progress{
        background: cyan;
        position: fixed;
        bottom: 0;
        height: 6px;
        left: 0;
        z-index: 4;
    }

    body {
        background-color: #fff;
        display: flex;
        align-items: center;
        height: 100vh;
    }
    .bg{
        position: fixed;
        z-index: 1;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-image: url(src/xue.jpg);
        background-repeat: no-repeat;
        background-size: cover;
        filter: blur(10px);
        transform: scale(1.2);
    }

    .geci {
        width: 100vw;
        height: 598px;
        text-align: center;
        color: #fff;
        overflow: hidden;
        position: relative;
        z-index: 3;

    }

    .mark {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 3;
        transform: scale(1, 1.2);
        background: linear-gradient(to bottom,transparent,transparent,transparent);
    }

    #list {
        transition: all .5s
    }


    .geci li {
        line-height: 46px;
        font-size: 16px;
        height: 46px;
        transition: all .5s;
    }

    .geci li.cur {
        color: #3eaf7c;
        color:cyan;
        transform: scale(1.5);
    }


</style>
</body>

</html>